<template>
  <div class="page-container">
    <h2>获取游戏信息</h2>
    <br />
    <el-input placeholder="请输入游戏id(游戏信息链接上)" v-model="gameId">
    </el-input>
    <el-button class="fanyiBtn" @click="getGameInfo" type="primary"
      >获取</el-button
    >

    <el-descriptions title="游戏信息" direction="vertical" :column="4" border>
      <el-descriptions-item label="游戏名称">{{
        info.name
      }}</el-descriptions-item>
      <el-descriptions-item label="游戏ID">{{
        universeId
      }}</el-descriptions-item>
      <el-descriptions-item label="游戏创建者">{{
        info.creator ? info.creator.name : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="游戏创建者身份">{{
        info.creator ? info.creator.type : ""
      }}</el-descriptions-item>

      <el-descriptions-item label="创建时间">{{
        info.created
      }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{
        info.updated
      }}</el-descriptions-item>

      <el-descriptions-item label="点赞数">{{ upVotes }}</el-descriptions-item>
      <el-descriptions-item label="点踩数">{{
        downVotes
      }}</el-descriptions-item>
      <el-descriptions-item label="收藏数">{{
        info.favoritedCount
      }}</el-descriptions-item>

      <el-descriptions-item label="最大玩家人数">{{
        info.maxPlayers
      }}</el-descriptions-item>
      <el-descriptions-item label="正在游玩人数">{{
        info.playing
      }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ info.price }}</el-descriptions-item>

      <el-descriptions-item label="游戏介绍" :span="4">{{
        info.description
      }}</el-descriptions-item>

      <!-- <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item> -->
    </el-descriptions>
    <br />

    <tr>
      <td class="gutter">
        <p class="line number1 index0 alt2">1</p>
        <p class="line number2 index1 alt1">2</p>
        <p class="line number3 index2 alt2">3</p>
        <p class="line number4 index3 alt1">4</p>
        <p class="line number5 index4 alt2">5</p>
        <p class="line number6 index5 alt1">6</p>
        <p class="line number7 index6 alt2">7</p>
        <p class="line number8 index7 alt1">8</p>
        <p class="line number9 index8 alt2">9</p>
        <p class="line number10 index9 alt1">10</p>
        <p class="line number11 index10 alt2">11</p>
        <p class="line number12 index11 alt1">12</p>
        <p class="line number13 index12 alt2">13</p>
        <p class="line number14 index13 alt1">14</p>
        <p class="line number15 index14 alt2">15</p>
        <p class="line number16 index15 alt1">16</p>
        <p class="line number17 index16 alt2">17</p>
      </td>
      <td class="code">
        <div class="container">
          <p class="line number1 index0 alt2">
            <code class="javascript plain">export </code
            ><code class="javascript keyword">default</code>
            <code class="javascript plain">{</code>
          </p>
          <p class="line number2 index1 alt1">
            <code class="javascript spaces">&nbsp;&nbsp;</code
            ><code class="javascript plain">getData() {</code>
          </p>
          <p class="line number3 index2 alt2">
            <code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript keyword">return</code>
            <code class="javascript keyword">new</code>
            <code class="javascript plain"
              >Promise((resolve, reject) =&gt; {</code
            >
          </p>
          <p class="line number4 index3 alt1">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain"
              >const script = document.createElement(</code
            ><code class="javascript string">'script'</code
            ><code class="javascript plain">);</code>
          </p>
          <p class="line number5 index4 alt2">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain">const url = </code
            ><code class="javascript string"
              >'https://example.com/data?callback=getdata'</code
            ><code class="javascript plain">;</code>
          </p>
          <p class="line number6 index5 alt1">&nbsp;</p>
          <p class="line number7 index6 alt2">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain">script.src = url;</code>
          </p>
          <p class="line number8 index7 alt1">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain"
              >document.head.appendChild(script);</code
            >
          </p>
          <p class="line number9 index8 alt2">&nbsp;</p>
          <p class="line number10 index9 alt1">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain"
              >window.getdata = (data) =&gt; {</code
            >
          </p>
          <p class="line number11 index10 alt2">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain"
              >document.head.removeChild(script);</code
            >
          </p>
          <p class="line number12 index11 alt1">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript keyword">delete</code>
            <code class="javascript plain">window.getdata;</code>
          </p>
          <p class="line number13 index12 alt2">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain">resolve(data);</code>
          </p>
          <p class="line number14 index13 alt1">
            <code class="javascript spaces"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain">}</code>
          </p>
          <p class="line number15 index14 alt2">
            <code class="javascript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code
            ><code class="javascript plain">});</code>
          </p>
          <p class="line number16 index15 alt1">
            <code class="javascript spaces">&nbsp;&nbsp;</code
            ><code class="javascript plain">}</code>
          </p>
          <p class="line number17 index16 alt2">
            <code class="javascript plain">}</code>
          </p>
        </div>
      </td>
    </tr>

    <div id="main" style="width: 400px; height: 300px"></div>
    {{ v_htme }}
    <a v-href="v_htme"> get:{{ v_htme }}</a>
    <iframe
      :src="v_htme"
      width="100%"
      height="600"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
</template>

<script>
import axios from "axios";
import request from "@/api/request";
export default {
  name: "Login",
  data() {
    return {
      text: "",
      gameId: "",
      v_htme: "",
      upVotes: 0,
      downVotes: 0,
      favoritesCount: 0,
      universeId: 0,

      // 游戏信息
      info: {
        // allowedGearCategories: (...)
        // allowedGearGenres: (...)
        // copyingAllowed: (...)
        // createVipServersAllowed: (...)
        // created: (...) 创建时间
        // creator: (...)
        // description: (...)
        // favoritedCount: (...)
        // genre: (...)
        // id: (...)
        // isAllGenre: (...)
        // isFavoritedByUser: (...)
        // isGenreEnforced: (...)
        // maxPlayers: (...)
        // name: (...)
        // playing: (...)
        // price: (...)
        // rootPlaceId: (...)
        // sourceDescription: (...)
        // sourceName: (...)
        // studioAccessToApisAllowed: (...)
        // universeAvatarType: (...)
        // updated: "2023-08-30T07:03:00.1744756Z"  更新时间
        // visits: 16909577
      },

      tenant_access_token: "",
      fanyi_text: "",
      time: 0,
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.gameId = localStorage.getItem("gameId");
      if (this.gameId && this.gameId != "") {
        this.getGameInfo();
      }
    }, 1000);
  },
  methods: {
    getData() {
      const src = "https://games.roblox.com/v1/games?universeIds=4187129020";
      let xhr = new XMLHttpRequest();
      xhr.open("GET", src);
      xhr.responseType = "json";
      xhr.send();
      xhr.onload = function (data) {
        if (xhr.status === 200) {
          // let resp = xhr.response;
          console.log(data);
        } else {
          console.log("Error");
        }
      };
    },
    async getGameInfo() {
      // 3790159047
      // this.getData();
      //设置响应头 设置允许跨域

      if (this.gameId != "") {
        localStorage.setItem("gameId", this.gameId);

        var _url =
          "https://apis.roproxy.com/universes/v1/places/" +
          this.gameId +
          "/universe";
        let data_ = await axios.get(_url);
        console.log("获取游戏信息001", data_);

        this.universeId = data_.data.universeId;
        if (!this.universeId) {
          this.$message.error("获取失败");
          // 获取失败
          return;
        }

        // https://games.roblox.com/v1/games?universeIds=4187129020

        // var url = `https://games.roblox.com/v1/games/votes?universeIds=` + this.universeId

        // var count_url = "/demo/v1/games/" + this.universeId + "/favorites/count"
        // let count = await axios.get(count_url)

        var info_url =
          `https://games.roblox.com/v1/games?universeIds=` + this.universeId;
        this.v_htme = info_url;
        // let info = await axios.get(info_url)
        // if (info.data.data) {
        //   this.info = info.data.data[0]
        // }
        // var url = `https://api.oick.cn/dutang/api.php`
        //  + this.universeId
        let str = await axios.get(url);
        // {"data":[{"id":3790159047,"upVotes":14236,"downVotes":1308}]}
        var data = str.data.data;
        console.log("获取游戏信息", info.data.data[0], str, data);

        // this.favoritesCount = count.data.favoritesCount

        if (!data[0]) {
          data = {
            id: 0,
            upVotes: 0,
            downVotes: 0,
          };
        } else {
          data = data[0];
        }
        this.upVotes = data.upVotes;
        this.downVotes = data.downVotes;

        var myChart = echarts.init(document.getElementById("main"));

        var option = {
          title: {
            text: "游戏点赞百分比",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          label: {
            normal: {
              formatter: "{b}:{c}" + "\n\r" + "({d}%)",
              show: true,
              position: "left",
            },
          },
          series: [
            {
              name: "数量",
              type: "pie",
              radius: "50%",
              data: [
                { value: data.upVotes, name: "点赞数" },
                { value: data.downVotes, name: "点踩数" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }

      var url_ =
        "/google/macros/s/AKfycbwr73Ei8umqbr6M8LntI3CHQVlTXX0PlpWDq0DE9y7qfMc6I_2W0YgXh_AUpngGztBZRA/exec?q=https%3A%2F%2Fgames%2Eroblox%2Ecom%2Fv1%2Fgames%2Fvotes%3FuniverseIds%3D3503342637";
      // var url_ = "https://script.google.com/macros/s/AKfycbwr73Ei8umqbr6M8LntI3CHQVlTXX0PlpWDq0DE9y7qfMc6I_2W0YgXh_AUpngGztBZRA/exec?q=https%3A%2F%2Fgames%2Eroblox%2Ecom%2Fv1%2Fgames%2Fvotes%3FuniverseIds%3D3503342637"
      let data_ = await axios.get(url_);
      console.log("获取游戏信息003", data_);
      // var url = `/demo/v2/users/games?accessFilter=Public&sortOrder=Asc&limit=10`
      // let str = await axios.get(url)
      // var data = str.data.data
      // console.log('获取游戏信息2', str,data);

      // curl --include --location --request GET "https://apis.roblox.com/datastores/v1/universes/3310576216/standard-datastores"
      // --header "x-api-key: ${API_KEY}"
      // --get
      // -d "prefix=Player"
      // -d "limit=5"
      // var url = "/apis/datastores/v1/universes/" + this.universeId + "/standard-datastores"
      // https://games.roblox.com/v1/games/ID/favorites/count 3

      var url = "/demo/v1/games/" + this.universeId + "/favorites/count";
      axios({
        url: url,
        type: "get",
        async: true,
        timeout: 5000,
        headers: {
          "x-api-key": "A7B1FD4rU0KSncxyK1WSA/kICGQY5fV1PlsbssAbSoboVAls",
        },
        data: {
          // prefix:'Player',
          limit: "5",
        },
        dataType: "jsonp", //返回的数据格式：json/xml/html/script/jsonp/text
        success: function (data, textStatus, jqXHR) {
          console.log(data);
        },
        error: function (xhr, textStatus) {
          console.log("请求失败");
        },
      });
    },
  },
};
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
.page-container {
  padding: 26px;
}
.fanyiBtn {
  margin: 26px 0;
}
.fanYiBox {
  padding: 26px;
  line-height: 30px;
  background-color: #ccc;
  border-radius: 12px;
  min-height: 60px;
}
</style>
